import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { Button } from '@material-ui/core';
import { SectionHeader } from 'components/molecules';

const useStyles = makeStyles(() => ({
  textWhite: {
    color: 'white',
    textTransform: 'uppercase',
  },
}));

const Adidas = props => {
  const { className, ...rest } = props;
  const classes = useStyles();

  return (
    <div className={className} {...rest}>
      <SectionHeader
        title={<span className={classes.textWhite}>OUR BUSINESS</span>}
        titleVariant="h1"
        subtitle={
          <span className={classes.textWhite}>
            With our innovative and insightful technology, we strive to enhance our users’ every day audio streaming experience. Founded in 2016, our incredible team of developers, programmers, designers and marketing experts have worked tirelessly to allow Crowded to breakthrough the music streaming industry.
            In order to provide a rich and interactive atmosphere, we dedicate time and resources to research the market needs and our users’ habits and motives. We have, and will continue to work tirelessly to become the music streaming standard, providing REAL stats and insights that artists and industry leaders not only approve of, but also depend on. Get in touch to learn more.
          </span>
        }
        ctaGroup={[
          <Button variant="outlined" color="secondary" size="large">
            Contact Us
          </Button>,
        ]}
        disableGutter
        data-aos="fade-up"
      />
    </div>
  );
};

Adidas.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
};

export default Adidas;
